<template>
  <div>
    <el-time-picker
      v-model="currentValue"
      is-range
      format="HH:mm:ss"
      range-separator="至"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      placeholder="选择时间范围"
      @input="onInputEvent"
    />
  </div>
</template>
<script>
export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['label', 'name', 'value', 'format', 'options', 'pickerOptions'],
  data() {
    return {
      currentValue: []
    }
  },
  watch: {
    value(value) {
      if (this.value) {
        this.currentValue = [new Date(`2020-02-01 ${this.value[0]}`), new Date(`2020-02-01 ${this.value[1]}`)]
      } else {
        this.currentValue = [new Date(`2020-02-01 08:00:00`), new Date(`2020-02-01 20:00:00`)]
      }
    }
  },
  created() {
    if (this.value) {
      this.currentValue = [new Date(`2020-02-01 ${this.value[0]}`), new Date(`2020-02-01 ${this.value[1]}`)]
    } else {
      this.currentValue = [new Date(`2020-02-01 08:00:00`), new Date(`2020-02-01 20:00:00`)]
    }
  },
  methods: {
    onInputSelect(value) {
      this.chackReturnData(this.currentValue)
    },
    chackReturnData(value) {
      var beg = new Date(value[0])
      var end = new Date(value[1])
      var begtime =
        (beg.getHours() < 10 ? `0${beg.getHours()}` : beg.getHours()) +
        ':' +
        (beg.getMinutes() < 10 ? `0${beg.getMinutes()}` : beg.getMinutes()) +
        ':' +
        (beg.getSeconds() < 10 ? `0${beg.getSeconds()}` : beg.getSeconds())
      var endtime =
        (end.getHours() < 10 ? `0${end.getHours()}` : end.getHours()) +
        ':' +
        (end.getMinutes() < 10 ? `0${end.getMinutes()}` : end.getMinutes()) +
        ':' +
        (end.getSeconds() < 10 ? `0${end.getSeconds()}` : end.getSeconds())
      this.$emit('input', this.name, [begtime, endtime])
    },
    onInputEvent(value) {
      console.log(value)

      this.chackReturnData(value)
    }
  }
}
</script>
